<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
      <el-form-item label="类目名称：">
        <el-input v-model="searchFilters.fullNamePath" placeholder="请输入类目name全路径"></el-input>
      </el-form-item>
     <!--<el-form-item label="主键id：">
      <el-input v-model="searchFilters.id" placeholder="请输入主键id"></el-input>
     </el-form-item>
     <el-form-item label="类目编码：">
      <el-input v-model="searchFilters.categoryCode" placeholder="请输入类目编码"></el-input>
     </el-form-item>
     <el-form-item label="第三方编码：">
      <el-input v-model="searchFilters.thirdCode" placeholder="请输入第三方编码"></el-input>
     </el-form-item>
     <el-form-item label="描述：">
      <el-input v-model="searchFilters.description" placeholder="请输入描述"></el-input>
     </el-form-item>
     <el-form-item label="类目id全路径：">
      <el-input v-model="searchFilters.fullIdPath" placeholder="请输入类目id全路径"></el-input>
     </el-form-item>
     <el-form-item label="类目name全路径：">
      <el-input v-model="searchFilters.fullNamePath" placeholder="请输入类目name全路径"></el-input>
     </el-form-item>
     <el-form-item label="是否可见1，可见，0隐藏：">
      <el-input v-model="searchFilters.isVisible" placeholder="请输入是否可见1，可见，0隐藏"></el-input>
     </el-form-item>
     <el-form-item label="是否是叶子节点  1代表是  2代表不是：">
      <el-input v-model="searchFilters.isLeaves" placeholder="请输入是否是叶子节点  1代表是  2代表不是"></el-input>
     </el-form-item>
     <el-form-item label="层级，如：1 标示顶级，2标示第二级 最高允许10级：">
      <el-input v-model="searchFilters.level" placeholder="请输入层级，如：1 标示顶级，2标示第二级 最高允许10级"></el-input>
     </el-form-item>
     <el-form-item label="列表排序：">
      <el-input v-model="searchFilters.listSort" placeholder="请输入列表排序"></el-input>
     </el-form-item>
     <el-form-item label="节点名称：">
      <el-input v-model="searchFilters.name" placeholder="请输入节点名称"></el-input>
     </el-form-item>
     <el-form-item label="父类目节点ID：">
      <el-input v-model="searchFilters.parentId" placeholder="请输入父类目节点ID"></el-input>
     </el-form-item>
     <el-form-item label="图片URL：">
      <el-input v-model="searchFilters.pictureUrl" placeholder="请输入图片URL"></el-input>
     </el-form-item>
     <el-form-item label="顶级类目的类型,1=后台类目、2=前台类目：">
      <el-input v-model="searchFilters.type" placeholder="请输入顶级类目的类型,1=后台类目、2=前台类目"></el-input>
     </el-form-item>
     <el-form-item label="顶级节点id：">
      <el-input v-model="searchFilters.firstCategoryId" placeholder="请输入顶级节点id"></el-input>
     </el-form-item>
     <el-form-item label="运营方ID：">
      <el-input v-model="searchFilters.deptId" placeholder="请输入运营方ID"></el-input>
     </el-form-item>
     <el-form-item label="创建时间：">
      <el-input v-model="searchFilters.createTime" placeholder="请输入创建时间"></el-input>
     </el-form-item>
     <el-form-item label="创建人：">
      <el-input v-model="searchFilters.creator" placeholder="请输入创建人"></el-input>
     </el-form-item>
     <el-form-item label="修改时间：">
      <el-input v-model="searchFilters.updateTime" placeholder="请输入修改时间"></el-input>
     </el-form-item>
     <el-form-item label="修改人：">
      <el-input v-model="searchFilters.updater" placeholder="请输入修改人"></el-input>
     </el-form-item>
     <el-form-item label="1 标识已删除 0 标识未删除：">
      <el-input v-model="searchFilters.deleteFlag" placeholder="请输入1 标识已删除 0 标识未删除"></el-input>
     </el-form-item>
     <el-form-item label="创建人名称：">
      <el-input v-model="searchFilters.creatorName" placeholder="请输入创建人名称"></el-input>
     </el-form-item>
     <el-form-item label="更新名称：">
      <el-input v-model="searchFilters.updaterName" placeholder="请输入更新名称"></el-input>
     </el-form-item>-->
      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button type="primary" size="small" @click="addForm()">新增</el-button>
        </el-button-group>
       </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=true
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=false
          :showIndex=false
          :showDeleteOperation=true
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleDelete="handleDelete"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
</el-form>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';

//二.数据输出区
export default {

//===== 注册组件 =====
components: {
 jicTable,
},

//===== 数据初始化区=====
data() { return {

//===== 公共数据初始化 =====
pageIndex:0,//当前页数：首页；
pageSize:10,//每页记录数：10条记录；
totalSize:0,//总记录数：返回数据总条数
pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
tableList: [],                               // 表格列表数据
searchSize: 'mini',

//=====表格表头数据=====
tableHeaderList: [
// {prop: "id", label: "主键id", minWidth: 100,formatter:null},
{prop: "categoryCode", label: "类目编码", minWidth: 100,formatter:null},
{prop: "thirdCode", label: "第三方编码", minWidth: 100,formatter:null},
{prop: "description", label: "描述", minWidth: 100,formatter:null},
// {prop: "fullIdPath", label: "类目id全路径", minWidth: 100,formatter:null},
// {prop: "fullNamePath", label: "类目name全路径", minWidth: 100,formatter:null},
// {prop: "isVisible", label: "是否可见1，可见，0隐藏", minWidth: 100,formatter:null},
// {prop: "isLeaves", label: "是否是叶子节点  1代表是  2代表不是", minWidth: 100,formatter:null},
// {prop: "level", label: "层级，如：1 标示顶级，2标示第二级 最高允许10级", minWidth: 100,formatter:null},
// {prop: "listSort", label: "列表排序", minWidth: 100,formatter:null},
{prop: "name", label: "节点名称", minWidth: 100,formatter:null},
// {prop: "parentId", label: "父类目节点ID", minWidth: 100,formatter:null},
{prop: "pictureUrl", label: "图片URL", minWidth: 100,formatter:null},
// {prop: "type", label: "顶级类目的类型,1=后台类目、2=前台类目", minWidth: 100,formatter:null},
// {prop: "firstCategoryId", label: "顶级节点id", minWidth: 100,formatter:null},
// {prop: "deptId", label: "运营方ID", minWidth: 100,formatter:null},
// {prop: "createTime", label: "创建时间", minWidth: 100,formatter:null},
// {prop: "creator", label: "创建人", minWidth: 100,formatter:null},
// {prop: "updateTime", label: "修改时间", minWidth: 100,formatter:null},
// {prop: "updater", label: "修改人", minWidth: 100,formatter:null},
// {prop: "deleteFlag", label: "1 标识已删除 0 标识未删除", minWidth: 100,formatter:null},
// {prop: "creatorName", label: "创建人名称", minWidth: 100,formatter:null},
// {prop: "updaterName", label: "更新名称", minWidth: 100,formatter:null},
],

//=====搜索表单对应的数据对象初始化=====
searchFilters: {
 id:null,
 categoryCode:null,
 thirdCode:null,
 description:null,
 fullIdPath:null,
 fullNamePath:null,
 isVisible:null,
 isLeaves:null,
 level:null,
 listSort:null,
 name:null,
 parentId:null,
 pictureUrl:null,
 type:null,
 firstCategoryId:null,
 deptId:null,
 createTime:null,
 creator:null,
 updateTime:null,
 updater:null,
 deleteFlag:null,
 creatorName:null,
 updaterName:null,
},
//dialogVisible: false, //// 是否显示弹窗内容;
//editDialogVisible1: false,//// 是否可编辑弹窗内容;
//editLoading: false,////是否显示加载时动画效果;
}
},

//===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
mounted() {
 this.findPage();
},

//=====Vue.js 方法区=====
methods: {

//1.查询按钮：查询列表数据
findPage(pageNum) {
      // 传过滤器的参数
  let this_ = this;
  if (this_.searchFilters === undefined || this_.searchFilters === null) {
    this_.searchFilters = {};
  }

   this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
   this_.searchFilters.pageSize = this.pageRequest.pageSize;
   this.utils.request.findMCategoryPage(this_.searchFilters, function (res) {
   if (res.code === "0000") {
     this_.tableList = res.data.list;
     this_.totalSize = Number(res.data.total);
   } else {
      this_.tableList = [];
      this_.totalSize = 0;
  }
  });
},

// 2.重置按钮：无条件查询搜索框条件
resetForm(formName) {
 this.searchFilters = {
};
 this.findPage(null);
},

// 3.详情按钮对应的方法
handleDetail(params) {
 this.$router.push({path: "/MCategoryDetail/" ,query:{id:params.row.id,disabled:true}});
},

// 4.编辑按钮对应的方法
handleEdit(params) {
 this.$router.push({path: "/MCategoryDetail/",query:{id:params.row.id,disabled:false}});
},

// 5.跳转到新增记录页面；
addForm(params) {
params ={row:{ id:null }};
 this.$router.push({path: "/MCategoryDetail/",query:{id:params.row.id,disabled:false}});
},
// 6.每页记录数发生变化
handleSizeChange(params) {
 this.pageRequest.pageSize = params.size;
},

// 7.请求页数发生变化
handlePageChange(params) {
this.pageRequest.pageNum = params.number;
this.findPage();
},
// 8.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 9.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

// 10.删除按钮：删除选中的记录
handleDelete(data) {
 this.utils.request.deleteMCategory({id: data.row.id}, res => {
  if (res.data) {
   this.$message({message: '删除成功', type: 'success'});
   this.findPage();
  } else {
   this.$message({message: '删除失败', type: 'warning'});
  }
 });
}
//==========Vue.js自定义方法区==========





},
}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
